<template>
  <view class="confirm-order-page">
    <view class="address-section">
      <view class="address-title">选择收货地址</view>
      <view class="selected-address" @click="toggleAddressList">
        <view class="address-details">
          <view class="address-name">{{ selectedAddress.name || '请选择地址' }}</view>
          <view class="address-phone">{{ selectedAddress.phone }}</view>
          <view class="address-detail">
            {{ selectedAddress.city }} {{ selectedAddress.department }} {{ selectedAddress.houseNumber }}
          </view>
        </view>
        <view class="dropdown-icon">
          <i :class="{'fa-chevron-up': isAddressListVisible, 'fa-chevron-down':!isAddressListVisible}" class="fas"></i>
        </view>
      </view>
      <view v-if="isAddressListVisible" class="address-list">
        <view v-for="(address, index) in addressList" :key="index" class="address-item" @click="selectAddress(address)">
          <view :class="{'address-item-active': address.id === selectedAddress.id}">
            <view class="address-details">
              <view class="address-name">{{ address.name }}</view>
              <view class="address-phone">{{ address.phone }}</view>
              <view class="address-detail">
                {{ address.city }} {{ address.department }} {{ address.houseNumber }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="order-products">
      <view v-for="(product, index) in orderInfo.products" :key="index" class="product-item">
        <view class="product-shop-info">
          <view class="product-shop">{{ product.shopName }}</view>
          <view class="product-image-info">
            <image :src="product.imgUrl" mode="aspectFill" class="product-image"></image>
            <view class="product-info">
              <view class="product-name">{{ product.name }} {{ product.specification }}</view>
              <view class="product-price">单价：¥{{ product.price }}</view>
              <view class="product-quantity">数量：{{ product.quantity }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="total-price">
      总价：<span style="color: red">¥{{ orderInfo.totalPrice }}</span>
    </view>
    <button class="pay-button" @click="goToPayment">去支付</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {},
      addressList: [],
      selectedAddress: {},
      isAddressListVisible: false
    };
  },
  onLoad(options) {
    this.fetchOrderInfo(options.orderId);
    this.fetchAddressList();
  },
  methods: {
    async fetchOrderInfo(orderId) {
      try {
        const response = await this.$axios.get(`http://localhost:3000/order/${orderId}`);
        this.orderInfo = response.data;
      } catch (error) {
        console.error('获取订单信息失败', error);
        uni.showToast({
          title: '获取订单信息失败，请稍后重试',
          icon: 'none'
        });
      }
    },
    async fetchAddressList() {
      try {
        const response = await this.$axios.get('http://localhost:3000/address');
        this.addressList = response.data;
        // 默认选择id=1的地址
        this.selectedAddress = this.addressList.find(address => address.id === '1') || {};
      } catch (error) {
        console.error('获取地址列表失败', error);
        uni.showToast({
          title: '获取地址列表失败，请稍后重试',
          icon: 'none'
        });
      }
    },
    selectAddress(address) {
      this.selectedAddress = address;
      this.isAddressListVisible = false;
    },
    goToPayment() {
      uni.navigateTo({
        url: `/pages/order/orderpay?orderId=${this.orderInfo.id}`
      });
    },
    toggleAddressList() {
      this.isAddressListVisible =!this.isAddressListVisible;
    }
  }
};
</script>

<style scoped>
.confirm-order-page {
  padding: 20px;
  background-color: #f8f8f8;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.page-title {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.address-section {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.address-title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 10px;
}

.selected-address {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 8px;
}

.dropdown-icon {
  font-size: 18px;
  color: #666;
}

.address-list {
  margin-top: 10px;
}

.address-item {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.address-item-active {
  background-color: #f0f9ff;
  border-radius: 8px;
}

.address-details {
  display: flex;
  flex-direction: column;
}

.address-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-bottom: 5px;
}

.address-phone {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.address-detail {
  font-size: 14px;
  color: #666;
}

.order-products {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.product-item {
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.product-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.product-shop-info {
  display: flex;
  flex-direction: column; /* 修改为垂直排列 */
  align-items: flex-start; /* 左对齐 */
}

.product-shop {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  margin-bottom: 10px; /* 增加底部间距 */
}

.product-image-info {
  display: flex;
  align-items: center;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  margin-right: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 5px;
}

.product-price {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}

.product-quantity {
  font-size: 16px;
  color: #666;
}

.total-price {
  font-size: 20px;
  color: #333;
  text-align: right;
  margin-top: 20px;
  margin-bottom: 20px;
}

.pay-button {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 18px;
  width: 100%;
  transition: background-color 0.3s ease;
}

.pay-button:hover {
  background-color: #007bff;
}
</style>